<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{http://cache.amap.com/lbs/static/main1119.css}"/>
    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        #box{
            position: relative;
            top:55%;

        }
        #container{
            height:50%;
        }
    </style>
</head>
<body>
<div id='container'></div>
<div id="tip"></div>
<div class="container-fluid" id="box">
    <div class="form-group">
        <label for="indety" class="text-success">请输入学号</label>
        <input type="text" class="form-control" name="indety" id="indety">
    </div>
    <div class="form-inline text-right">
        <input type="button" class="btn btn-primary" value="点击签到" id="sign">
    </div>
</div>

<script th:src="@{/js/jquery.min.js }"></script>
    <script type="text/javascript" th:src="@{http://webapi.amap.com/maps?v=1.4.6&key=5797e1463e6fe2df2fd3849f8d83b51f}"></script>
    <script type="text/javascript" th:src="@{http://cache.amap.com/lbs/static/addToolbar.js}"></script>
<script type="text/javascript">
    let nowl = 0;
    let nowd = 0;
    let distan = 0;
    let info = {};
    console.log('外部')
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true
    });
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    //解析定位结果
    function onComplete(data) {
        console.log('解析定位 onComplete()')
        var str=['定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        nowl = data.position.getLng();
        nowd = data.position.getLat();

        if(data.accuracy){
            str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('tip').innerHTML = str.join('<br>');
    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败';
    }

    function MyTime() {
        let timer = new Date();
        let day = timer.getDay();
        let hours = timer.getHours()<10?"0"+timer.getHours():timer.getHours();
        let right = timer.getMinutes()<10?"0"+timer.getMinutes():timer.getMinutes();
        return day+","+hours+":"+right;
    }

    function nowTime() {
        var myDate = new Date();
        var year = myDate.getFullYear();
        var month = myDate.getMonth()+1;
        var day = myDate.getDate();
        var hours = myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours();
        var minutes = myDate.getMinutes()<10?"0"+myDate.getMinutes():myDate.getMinutes();
        var seconds = myDate.getSeconds()<10?"0"+myDate.getSeconds():myDate.getSeconds();
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
    }
    window.onload = function () {
        console.log('onload()')
        var phone = {
            version:function(){
                let u = navigator.userAgent, app = navigator.appVersion;
                return {
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器,
                    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                };
            }(),
        }
        if(phone.version.android || phone.version.iPhone){
            let data = MyTime();
            $.ajax({
                url:'/course/findByTime',
                type:'GET',
                data:{data},
                success:function (result) {
                    console.log(result);
                    if(!result){
                        document.write("<h1>当前不是上课时间！</h1>")
                    }else{
                        fl = result.longitude;
                        fd = result.dimension;
                        setTimeout(function(){
                            var lnglat1 = new AMap.LngLat(fl,fd);
                            var lnglat2 =  new AMap.LngLat(nowl, nowd);
                            var distance = Math.round(lnglat1.distance(lnglat2));
                            if (nowl == 0 || nowd == 0){
                                document.write("<h1>定位失败,请重试</h1>")
                            }else{
                                if(distance<=300){
                                    distan = distance;
                                    info = result;
                                }else{
                                    document.write("<h1>不再在有效签到距离内</h1>")
                                }
                            }
                        },1000)
                    }
                }
            })
        }else{
            document.write("<h1>请在手机端签到</h1>");
        }


        $("#sign").on('click',function () {
            let indety = $("#indety").val();
            let timer = nowTime();
            let data = MyTime();
            if(indety==""){
                alert("请输入学号")
                return false;
            }
            $.post('/signin/add',{
                number:indety,
                data:data,
                timer:timer,
            },function(result){
                console.log(result);
                alert(result.msg);
            })
        })
    }


</script>
</body>
</html>